<template>
 <div class="activityTpl1">
   <div class="barrage">
     <vue-baberrage
       :barrageList="barrageList"
       :boxHeight="boxHeight"
       :isShow="value.base_style_config.custom.is_show_top_barrage"
       :lanesCount="lanesCount"
       :loop="barrageLoop"
       :messageHeight="messageHeight"
       :throttleGap="throttleGap">
     </vue-baberrage>
   </div>
   <div class="activity-preview-list" :style="{backgroundColor: this.value.base_style_config.custom.bg_colour}">
<!--     <div class="activity-preview-list-item">
       <div style="width: 100%;word-break: break-all;">
         {{ previewContent }}
       </div>
     </div>-->
     <div class="activity-preview-list-item">
       <TopBgBannerView v-model="topBgBannerImgs"/>
     </div>
     <div class="activity-preview-list-item" v-if="value.base_style_config.custom.is_show_countdown">
       <ActivityTimeView :times.sync="activityTimeRange"/>
     </div>
     <div class="activity-preview-list-item">
       <ShowAvatar :custom="value.base_style_config.custom"/>
     </div>
     <div class="activity-preview-list-item" v-if="value.pintuan_goods_config.custom.is_show_goods_list">
       <GoodsArea :goodsList="value.pintuan_goods_config.interval_goods_list"
                  :isShowKaituan="value.pintuan_goods_config.custom.is_show_kaituan_list"
                  :isInventory="value.pintuan_goods_config.is_inventory"
                  :inventoryNumber="value.pintuan_goods_config.inventory_number"
                  :title="value.pintuan_goods_config.welfare_title.title"/>
     </div>
     <div class="activity-preview-list-item">
       <Store :storeInfo="value.mendian_customer_server_info.mendian_list[0]"
              :isShowStore="value.mendian_customer_server_info.page_is_show_mendian_info"
              :mendianNumber="value.mendian_customer_server_info.mendian_list.length"/>
     </div>
     <div class="activity-preview-list-item" v-if="value.invite_reward_config.is_open_invite">
       <Award :awardList="value.invite_reward_config.prize_list" :title="value.invite_reward_config.title"/>
     </div>
     <div class="activity-preview-list-item">
       <Rank :isShowRank="value.base_style_config.custom.is_show_invite_rank"/>
     </div>
     <div class="activity-preview-list-item">
       <IntroduceView :introduce.sync="value.activity_and_agency_introduce_config"/>
     </div>
     <div class="activity-preview-list-item">
       <PreviewRecord :isShowPreviewRecord="value.base_style_config.custom.is_show_bottom_buy_record"/>
     </div>
   </div>
 </div>
</template>

<script>
import TopBgBannerView  from "./preview/TopBgBannerView";
import ActivityTimeView  from "./preview/ActivityTimeView";
import ShowAvatar  from "./preview/ShowAvatar";
import GoodsArea  from "./preview/GoodsArea";
import Store  from "./preview/Store";
import Award  from "./preview/Award";
import Rank  from "./preview/Rank";
import IntroduceView  from "./preview/IntroduceView";
import PreviewRecord  from "./preview/PreviewRecord";
import moment from 'moment';
import {MESSAGE_TYPE} from "vue-baberrage";
export default {
  name: "activityTpl1",
  components: {
    TopBgBannerView,
    ActivityTimeView,
    ShowAvatar,
    GoodsArea,
    Store,
    Award,
    Rank,
    IntroduceView,
    PreviewRecord,
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    previewContent() {
      return this.value
    },
    topBgBannerImgs() {
      if (this.value
          && this.value.base_style_config
          && this.value.base_style_config.head_image
          && this.value.base_style_config.head_image.images) {
        const images = this.value.base_style_config.head_image.images
        let list;
        if (Array.isArray(images)) {
          list = images;
        } else {
          list = images.split(',')
        }
        return list
      }
      return []
    },
    activityTimeRange() {
      if (this.value
          && this.value.base_style_config
          && this.value.base_style_config.start_end_time
          && this.value.base_style_config.start_end_time.start_time
          && this.value.base_style_config.start_end_time.end_time) {
        return {
          start: this.value.base_style_config.start_end_time.start_time,
          end: this.value.base_style_config.start_end_time.end_time,
        }
      }
      return {
        start: moment().startOf('day').format("yyyy-MM-dd HH:mm:ss"),
        end: moment().endOf('day').format("yyyy-MM-dd HH:mm:ss"),
      }
    }
  },
  data() {
    return {
      messageContent: "",
      barrageList: [],
      //是否循环播放
      barrageLoop: true,
      //高度
      boxHeight: 200,
      //消息高度
      messageHeight: 15,
      //泳道数量
      lanesCount: 4,
      //消息间隔
      throttleGap: 5,
    }
  },
  mounted() {
    this.addBarrageList();
  },
  methods: {
    /** 弹幕列表 */
    addBarrageList() {
      let list = [
        {id: 1, avatar: 'https://cdn.s.shangjiadao.cn/source/images/avatar_template.png', nickname: '我是昵称', msg: '真心推荐', time: 3},
        {id: 2, avatar: 'https://cdn.s.shangjiadao.cn/source/images/avatar_template.png', nickname: '我是昵称', msg: '真心推荐', time: 5},
        {id: 3, avatar: 'https://cdn.s.shangjiadao.cn/source/images/avatar_template.png', nickname: '我是昵称', msg: '真心推荐', time: 4},
        {id: 4, avatar: 'https://cdn.s.shangjiadao.cn/source/images/avatar_template.png', nickname: '我是昵称', msg: '真心推荐', time: 2},
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.nickname + ' ' + v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
        });
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.activityTpl1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.activity-preview-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: #778da6;

  .activity-preview-list-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
}

/*弹幕区域高度*/
::v-deep  .baberrage-stage {
  height: 200px;
  position: absolute;
  top: 100px;
  z-index: 200;
}

/*弹幕消息框*/
::v-deep .baberrage-item .normal {
  padding: 5px 10px;
}

/*头像*/
::v-deep  .baberrage-item .normal .baberrage-avatar {
  width: 20px;
  height: 20px;
  background-color: black;
}

/*文字*/
::v-deep  .baberrage-item .normal .baberrage-msg {
  font-size: 12px;
  line-height: 20px;
}
</style>
